<script setup lang="ts">

</script>

<template>
<div class="wrap">
  <section>
    <div class="container">
      <div class="item">水平居中 <br /> (place-content: center)</div>
    </div>
  </section>
</div>
</template>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wrap {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", "Bungee Shade", cursive, Arial, sans-serif;
  background-color: #557;
  color: #fff;
  display: grid;
  place-content: center;
  padding: 1rem;

  section {
    width: 80vw;
    min-height: 50vh;
    overflow: hidden;
    resize: both;
    margin: 0 auto;
    font-family: "Bungee Shade", cursive;
    font-size: 1.2rem;

    display: flex;
    box-shadow: 0 0 0 6px rgb(217 210 10 / 9%);
    border-radius: 4px;

    .container {
      width: 100%;
      padding: 1rem;
      display: grid;
      place-content: center;

      .item {
        counter-increment: item;
        display: flex;
        justify-content: center;
        align-items: center;
        /*   min-height: 120px; */
        background-color: #2c6;
        color: #000;
        position: relative;
      }
    }
  }
}
</style>
